<!--
 * @Author: chengjiang
 * @Date: 2024-05-16 09:13:51
 * @Description: 计算黄金价格。
-->
<template>
    <HeaderPage :logoQRcode="qrcode" />
    <button
    @click="handleClick()" class="titleStyle"><img
      src="@/assets/favicon.ico"
      alt="logo"
      width="20"
      style="line-height: 20px; margin: 0"/>返回</button>
    <div class="caculate-page text-center mt-10 mb-20">
        <!-- 字体颜色为CFAA53 -->
        <div class="header text-yellow-300 text-2xl font-bold mt-10">黄金定价</div>
        <!-- input -->
        <div class="input-box">
        </div>
        <!-- btn:买金，卖金 -->
        <div>
            <input class="inputSet" :placeholder="placeholder" v-model="price"/>
        </div>
        <button class="btn" @click="getFinalCharge(BUY)">买金</button>
        <button class="btn" @click="getFinalCharge(SELL)">卖金</button>
        <div>
            <input class="inputSet" placeholder="请输入您买/卖的数量（单位：克）" v-model="weight"/>
        </div>
        <div>
            <input class="inputSet" placeholder="买/卖定价" v-model="charge" ref="inputField"/>
        </div>
        <button @click="copyInput()" class="btn">复制输出</button>
        <button @click="clearInput()" class="btn">清空</button>
    </div>
</template>
<script lang="ts">
 import HeaderPage from '_c/HeaderPage.vue'
 import { defineComponent, ref } from 'vue'
 import { useGoldInfoStore } from '@/stores/modules/goldInfo'
 const store = useGoldInfoStore()
 store.setGoldInfoMap()
 type PRICE_TYPE = 1 | 2
 const BUY:PRICE_TYPE = 1
 const SELL:PRICE_TYPE = 2
 const qrcode = ref('/code.png');
  export default defineComponent({
    setup() {
      return {
        price: ref<any>(''), // 单价
        weight: ref<any>(''), // 重量：g
        charge: ref<any>(''), // 最终费用
        placeholder: ref(''),
        BUY: BUY,
        SELL: SELL,
        qrcode: qrcode,
      }
    },
    mounted() {
        this.fresh()
    },
    beforeUnmount() {
        // store.disconnect()
    },
    methods: {
    handleClick() {
      this.$router.push('/gold').then(() => {
          // 刷新页面：
        this.$router.go(0)
      })
    },
     fresh() {
         setInterval(() => {
             store.setGoldInfoMap();
             this.getSellBuy();
             console.log('触发刷新', this.placeholder)
        }, 1000); // 1秒间隔
     },
     getSellBuy() {
        this.placeholder = "回购价:"+store.buy.toFixed(2)+"/销售价:"+store.sell.toFixed(2)
        // return "回购价:"+store.sell.toFixed(2)+"/销售价:"+store.buy.toFixed(2)
     },
     getFinalCharge(priceType:PRICE_TYPE) {
        // if (this.price!= 0)  {
        //     this.charge = this.price * this.weight
        // }else {
        //     // 并替换placeholder
        //     switch (priceType) {
        //         case BUY:
        //             this.placeholder = "回购价:"+store.buy.toFixed(2)
        //             // this.charge = store.sell * this.weight
        //             this.charge = this.price * this.weight
        //             this.charge = this.charge.toFixed(0)
        //             this.charge = '买定价:' + (this.weight/1000)+'K*'+ store.sell.toFixed(2) +'='+ this.charge+'元'
        //             break;
        //         case SELL:
        //             this.placeholder = "销售价:"+store.sell.toFixed(2)
        //             // this.charge = store.buy * this.weight
        //             this.charge = this.price * this.weight
        //             this.charge = this.charge.toFixed(0)
        //             this.charge = '卖定价:' + (this.weight/1000)+'K*'+ store.buy.toFixed(2) +'='+ this.charge+'元'
        //             break;
        //         default:
        //             this.charge = 0
        //             break;
        //     }
        // }
        //确定是买金还是卖金
        let price : number = Number(0)
        switch(priceType){
            case BUY:
                //获取回购价
                this.placeholder = "回购价:"+store.buy.toFixed(2)
                price = (this.price != 0 && this.price != '') ? Number(this.price) : store.sell
                //添加前缀
                this.charge = '买定价:'
                break;
            case SELL:
                //如果是卖金
                this.placeholder = "销售价:"+store.sell.toFixed(2)
                price = (this.price != 0 && this.price != '') ? Number(this.price) : store.buy
                //获取销售价
                //添加前缀
                this.charge = '卖定价:'   
                break;
        }
        //是不是使用默认价格
        //输出结果
        const finalprice: number = price * this.weight;
        this.charge += (this.weight/1000) + 'K * ' + price.toFixed(2) + '= ' + finalprice.toFixed(0) + ' 元' 
        this.price = '' // 复原。
     },
     // 写一个函数，清空当前的输入框
     clearInput() {
        this.price = ''
        this.weight = ''
        this.charge = ''
     },
     // 复制输入框的值到剪贴板
     async copyInput() {
        try {
            if ('clipboard' in navigator && 'writeText' in navigator.clipboard) {
                // 尝试使用navigator.clipboard.writeText
                await navigator.clipboard.writeText(this.charge).then(() => {
                    alert("复制成功")
                }, () => {
                    alert("复制失败")
                })
            } else {
                // 使用document.execCommand('copy')作为备选方案
                const inputField = this.$refs.inputField as HTMLInputElement; // 获取input元素
                inputField.select(); // 选中输入框内容
                document.execCommand('copy');
                alert('复制成功');
            }
        } catch (err) {
            console.log(err);
            alert("不兼容，复制失败")
        }
     },
    },
  })
</script>

<style>
    .titleStyle {
        @apply
        ml-4
        text-yellow-400
        flex
        justify-center
        mt-1
    }
    .inputSet{
        @apply
        bg-transparent
        border
        border-gray-500
        rounded
        py-2
        mt-5
        w-80
        text-center
        text-light-50
    }
    .btn {
        @apply
        w-3/10
        mx-20
        my-2
        py-1 text-xl text-yellow-400 font-500
        rounded border border-gray-400 dark:border-yellow-100
        hover:text-white hover:bg-warm-gray-500 hover:border-transparent
        focus:outline-none focus:ring-2 ring-yellow-400 ring-opacity-40;
    }
</style>